<template>
  <!--系统日志-->
  <el-row style="height:100%">
    <page>
      <pageheader :event="'menuPopUp'" :isShow="false">
        系统日志
      </pageheader>
      <div class="page-content">
        <el-card class="box-card">
          <el-row>
              <SearchInput
                @recordsearch="recordsearch"
                :searchEvent="'recordsearch'"
                :value.sync="keywords"
                :searchText="'请输入'"
                ref="clearText"
              >搜索数据：</SearchInput>
          </el-row>
          <el-table :data="dataTable" size="small" stripe>
            <el-table-column type="expand">
              <template slot-scope="props">
                <div>
                  <span style="font-size:16px;font-weight: bold">method:</span>
                  <span style="font-size:16px">{{props.row.method}}</span>
                </div>
                <div>
                  <span style="font-size:16px;font-weight: bold">exception_code:</span>
                  <span style="font-size:16px">{{props.row.exception_code}}</span>
                </div>
                <div>
                  <span style="font-size:16px;font-weight: bold">exception_detail:</span>
                  <span style="font-size:16px">{{props.row.exception_detail}}</span>
                </div>
                <div>
                  <span style="font-size:16px;font-weight: bold">user_agent:</span>
                  <span style="font-size:16px">{{props.row.user_agent}}</span>
                </div>
                <div>
                  <span style="font-size:16px;font-weight: bold">params:</span>
                  <span style="font-size:16px">{{props.row.params}}</span>
                </div>
                <div>
                  <span style="font-size:16px;font-weight: bold">op_user_id:</span>
                  <span style="font-size:16px">{{props.row.op_user_id}}</span>
                </div>
                <div>
                  <span style="font-size:16px;font-weight: bold">op_user_name:</span>
                  <span style="font-size:16px">{{props.row.op_user_name}}</span>
                </div>
                <div>
                  <span style="font-size:16px;font-weight: bold">result_data:</span>
                  <span style="font-size:16px">{{props.row.result_data}}</span>
                </div>
                <div>
                  <span style="font-size:16px;font-weight: bold">result_msg:</span>
                  <span style="font-size:16px">{{props.row.result_msg}}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="序号" type="index" :index="indexMethod" align="center" width="60"></el-table-column>
            <el-table-column label="操作用户" prop="op_user_name" align="center" sortable></el-table-column>
            <el-table-column label="操作时间" prop="op_time" align="center" sortable></el-table-column>
            <el-table-column label="log_desc" prop="log_desc" align="center" sortable></el-table-column>
            <el-table-column label="IP" prop="ip" align="center" sortable></el-table-column>
            <el-table-column label="result_code" prop="result_code" align="center" sortable></el-table-column>
            <el-table-column label="log_type_desc" prop="log_type_desc" align="center" sortable></el-table-column>
            <el-table-column label="log_type" prop="log_type" align="center" sortable></el-table-column>
            <el-table-column label="运行时间(ms)" prop="run_time" align="center" sortable></el-table-column>
          </el-table>
          <el-pagination background
                         layout="total,sizes,prev,pager, next"
                         @current-change="currentChange"
                         @size-change="sizeChange"
                         :page-sizes="pagination.pageSizes"
                         :page-size.sync="pagination.pageSize"
                         :total="pagination.total"
                         :current-page.sync="pagination.currentPage"
                         class="paging fr">
          </el-pagination>

        </el-card>
      </div>
    </page>
  </el-row>
</template>

<script>
  import page from "@/components/page/page";
  import pageheader from "@/components/page/pageheader";
  import SearchInput from "@/components/sys/assembly/searchinput";
  import TreeTable from "@/components/sys/assembly/treeTable";
  export default {
    data() {
      return {
        keywords:'',//搜索查询
        dataTable:[],//表格数据
        pagination:{
          total:0,//总条目数
          currentPage:1,//当前页数
          pageSize:10,//每页显示条目个数
          pageSizes:[10,20,50,100],//每页显示个数选择器的选项设置
        },//表格分页参数
      }
    },
    components:{
      page,
      pageheader,
      SearchInput,//搜索框组件
      TreeTable,//表格组件
    },
    created(){
      this.getLogList()
    },
    methods:{
      //表格序号显示方法
      indexMethod(index){
        return index + ((this.pagination.currentPage - 1) * this.pagination.pageSize) + 1
      },
      getLogList(page=1,page_size=10,keywords=''){
        let url = '/sys/log/list?page='+ page + '&page_size=' + page_size + '&keywords=' + encodeURIComponent(keywords)
        this.$api.get(url)
        .then((data)=>{
          if(data == '10001'){
            this.$message.error('无权操作该数据')
            this.$Bus.$emit('Loading',false);
            return
          }
          let _data = data.data;
          this.dataTable = _data.dataList;
          this.pagination.total = _data.dataCount;
          this.pagination.currentPage = _data.pageCode;
          this.pagination.pageSize = _data.pageSize;
          this.$Bus.$emit('Loading',false)
        })
        .catch(err=>{
           console.log(err);
          this.dataTable = []
          this.$Bus.$emit('Loading',false)
        })

      },
      //搜索按钮点击事件
      recordsearch(data) {
        this.$Bus.$emit('Loading',true)
        this.keywords = data
        this.getLogList(1,this.pagination.pageSize,data)
      },
      //每页显示条目个数change事件
      sizeChange(val){
        this.$Bus.$emit('Loading',true)
        this.getLogList(this.pagination.currentPage,val,this.keywords)
      },
      //分页change事件
      currentChange(val){
        this.$Bus.$emit('Loading',true)
        this.getLogList(val,this.pagination.pageSize,this.keywords)
      },

    }
  }
</script>

<style lang="scss">
  .page-content {
    
    .fr {
      float: right;
    }
    .el-table {
      margin-bottom: 10px;
    }
    .paging {
      margin: 15px;
      height: 28px;
    }
  }
</style>